<template>
  <div class="medicineManage-container">
    <div class="header-container tools-container">
      <XmCardHeader
        title="快速编辑"
        subTitle="导入表格前需下载模板表格并按要求填写数据"
      ></XmCardHeader>
      <div>
        <el-button type="primary" @click="addMedicine">添加药品</el-button>
        <el-button type="primary" @click="uploadXLS">导入表格</el-button>
        <el-button>下载模板</el-button>
      </div>
    </div>
    <div class="header-container">
      <el-form :model="d.form" label-width="80px" ref="seachRef">
        <el-row :gutter="20">
          <el-col :span="6">
            <xm-f-intput
              v-model="d.form.medicineName"
              prop="medicineName"
              label="药品名称:"
            ></xm-f-intput>
          </el-col>
          <el-col :span="6">
            <xm-f-intput
              v-model="d.form.id"
              label="药品ID:"
              prop="id"
            ></xm-f-intput>
          </el-col>
          <el-col :span="6">
            <xm-f-select
              isMultiple
              v-model="d.form.intended"
              prop="intended"
              label="适用人群:"
              :options="fitPeople"
            ></xm-f-select>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <XmFSelect
              v-model="d.form.drugType"
              prop="drugType"
              label="药品类型:"
              :options="medicinalAttrs"
            ></XmFSelect>
          </el-col>
          <el-col :span="6">
            <el-form-item label="药品剂型:">
              <el-cascader
                v-model="d.form.dosageForm"
                prop="dosageForm"
                :options="dosageForms"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <XmFIntput
              v-model="d.form.approvalNumber"
              prop="approvalNumber"
              label="批准文号:"
            ></XmFIntput>
          </el-col>
          <el-col :span="8">
            <XmFIntput
              v-model="d.form.mainComponents"
              prop="mainComponents"
              label="主要成分:"
            ></XmFIntput>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <XmFIntput
              v-model="d.form.createEnterprise"
              prop="createEnterprise"
              label="生产企业:"
            ></XmFIntput>
          </el-col>
          <el-col :span="9">
            <XmFIntput
              v-model="d.form.listingPermitHolder"
              prop="listingPermitHolder"
              label-width="120px"
              label="上市许可持有人:"
            ></XmFIntput>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="创建时间:" prop="time">
              <XMDatePicker
                v-model="d.form.time"
                v-model:startTime="d.form.startTime"
                v-model:endTime="d.form.endTime"
                type="daterange"
                disabledDateT="after"
                label="选择开始时间:"
                style="width: 180px"
              ></XMDatePicker>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              label="有效期区间:"
              label-width="100px"
              prop="termValidity"
            >
              <XMDatePicker
                v-model="d.form.termValidity"
                v-model:startTime="d.form.startTermValidity"
                v-model:endTime="d.form.endTermValidity"
                type="daterange"
                disabledDateT="after"
                label="选择开始时间:"
                prop="termValidity"
                style="width: 180px"
              ></XMDatePicker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3">
            <el-button @click="seachData" type="primary" style="width: 100%">
              筛选
            </el-button>
          </el-col>
          <el-col :span="3">
            <el-button style="width: 100%" @click="clear">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content-container">
      <PaginationTable :tableData="d.listData" @pagination="paginaChange">
        <XMTableColumn label="药品ID" width="100" prop="id"></XMTableColumn>
        <XMTableColumn label="药品名称" prop="medicineName"></XMTableColumn>
        <XMTableColumn label="生产企业" prop="createEnterprise"></XMTableColumn>
        <XMTableColumn
          label="通用名称"
          width="100"
          prop="commonName"
        ></XMTableColumn>
        <XMTableColumn label="类型" width="100" prop="drugType"></XMTableColumn>
        <XMTableColumn
          label="剂型"
          width="100"
          prop="dosageForm"
        ></XMTableColumn>
        <XMTableColumn
          label="规格型号"
          width="100"
          prop="specifications"
        ></XMTableColumn>
        <XMTableColumn
          label="适用人群"
          width="100"
          prop="intended"
        ></XMTableColumn>
        <XMTableColumn
          label="有效期(月)"
          sortable="custom"
          prop="termValidity"
        ></XMTableColumn>
        <XMTableColumn label="创建时间" prop="createTime"></XMTableColumn>
        <XMTableColumn label="批准文号" prop="approvalNumber"></XMTableColumn>
        <XMTableColumn label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button size="small" type="danger" @click="del(scope.row)">
              删除
            </el-button>
          </template>
        </XMTableColumn>
      </PaginationTable>
    </div>
  </div>
</template>
<script>
  import { useRouter } from 'vue-router'
  import medicinal from '@/hooks/medicinal.vue'
  import { medicalLists, delData } from '@/api/modules/medicinal'
  import { reactive, ref, onActivated } from 'vue'
  import fileHook from '@/hooks/file.vue'
  import { uploadXlS } from '@/api/modules/upload'
  import common from '@/utils/common.js'
  export default {
    name: 'medicineManage',
    setup() {
      const router = useRouter()
      const addMedicine = function () {
        router.push({ name: 'addMedicine' })
      }
      onActivated(() => {
        seachData()
      })
      // 清空数据
      const seachRef = ref(null)
      const clear = function () {
        d.form.startTime = null
        d.form.endTime = null
        d.form.startTermValidity = null
        d.form.endTermValidity = null
        seachRef.value.resetFields()
      }

      const edit = function (row) {
        router.push({ name: 'addMedicine', query: { id: row.id } })
      }
      const seachData = async function () {
        const res = await medicalLists({
          ...d.search,
          ...d.form,
          dosageForm: d.form.dosageForm ? d.form.dosageForm.join(',') : '',
        })
        d.listData = res
      }

      const paginaChange = function (params) {
        d.search.pageIndex = params.current
        d.search.pageSize = params.pageSize
        d.search.orderType = params.orderType
        seachData()
      }

      const del = async function (row) {
        await delData({ id: row.id })
        seachData()
      }
      const d = reactive({
        form: { medicineName: null },
        listData: {},
        search: { pageIndex: 1, pageSize: 5, orderType: 1 },
      })

      const { selXLS } = fileHook()
      const uploadXLS = async function () {
        const { base64, fileName } = await selXLS()
        common.XmLoading(true)
        uploadXlS(base64, 2, base64)
          .then((res) => {
            common.XmLoading(false)
            common.XmMessage(0, '导入成功')
            seachData()
          })
          .catch(() => common.XmLoading(false))
      }
      return {
        d,
        edit,
        del,
        addMedicine,
        seachRef,
        clear,
        seachData,
        paginaChange,
        uploadXLS,
        ...medicinal(),
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .medicineManage-container {
    margin: 22px;
    .tools-container {
      margin-bottom: 22px;
      span {
        margin-top: 5px;
        font-size: 12px;
        color: #606266;
      }
    }
    .header-container {
      @include card-shadow;
      padding: 12px;
      background-color: white;
      .el-form-item {
        margin-top: 15px;
        margin-bottom: 15px;
      }
    }
    .content-container {
      @include card-shadow;
      margin-top: 22px;
      background-color: white;
      padding: 11px;
      .add-medicine {
        margin: 12px;
      }
    }
  }
</style>
